{% extends "base.html" %}
{% load ccfilters %}
{% load cctags %}

{% block head_ex %}
{% if users.is_admin %}
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript">
var TCNDDU = TCNDDU || {};
(function(){
	var dropContainer,
		dropListing;
		
	TCNDDU.setup = function () {
	
		dropListing = document.getElementById("content");
		dropContainer = document.getElementById("page");
		savedBackColor = dropContainer.style.backgroundColor;
                
		dropContainer.addEventListener("dragenter", function(event){
			event.stopPropagation();event.preventDefault();
			dropContainer.style.backgroundColor = "#CDEB8B";
		}, false);
		dropContainer.addEventListener("dragover", function(event){
			event.stopPropagation();event.preventDefault();
			dropContainer.style.backgroundColor = "#CDEB8B";
		}, false);
		dropContainer.addEventListener("dragleave", function(event){
			event.stopPropagation();event.preventDefault();
			dropContainer.style.backgroundColor = savedBackColor;
		}, false);
		dropContainer.addEventListener("drop", function(event){
			event.stopPropagation();event.preventDefault();
			dropContainer.style.backgroundColor = savedBackColor;
			TCNDDU.handleDrop(event);
		}, false);
	};
	
	TCNDDU.fileTypes = "jpg,png,gif,jpeg,tiff,ico,bmp,jpe,JPG,PNG,GIF,JPEG,TIFF,ICO,BMP,JPE";
	
	TCNDDU.handleDrop = function (event) {
		var files = event.dataTransfer.files,
		    count = files.length;
                
		for (var i = 0; i < count; i++) { 
			if(files[i].size < 8*1000*1000) {
				var file = files[i],
					filename = file.name,
					reader = new FileReader();
				
				/* check file ext */
				filename = filename.split('.');
				ext = filename[filename.length-1];
				if ( TCNDDU.fileTypes.indexOf(ext) >= 0 )
				{
					reader.index = i;
					reader.file = file;
					reader.onload = function(evt){ TCNDDU.buildImageListItem(evt);} 
					reader.readAsDataURL(file);
				}
				else
				{
					alert('{% _ "unsupported file type" %} '+file.name);
				}
		    } 
			else {
		        alert('{% _ "file size exceed 8M" %}');
		    } /*end if*/
		} /*end for*/
	};
	
	TCNDDU.buildImageListItem = function (event) {
        var thumb =	document.createElement('div'),
			a = document.createElement('a'),
			photo = document.createElement('img'),
			description = document.createElement('div');
    
		var data = event.target.result, 
			index = event.target.index, 
			file = event.target.file, 
			imgPreviewFragment = document.createDocumentFragment(),
			getBinaryDataReader = new FileReader();
			
		description.id = "description";	
			
		photo.src = data; // base64 encoded string of local file(s) 
		a.href = "/{{album.name}}/"+file.name.replace(/ /g,'_');
		a.appendChild(photo); 
		
		thumb.appendChild(a); 
		thumb.appendChild(description);
		thumb.id = "thumb"; 
		thumb.className = "loading";
		
		imgPreviewFragment.appendChild(thumb); 
		
		dropListing.insertBefore(imgPreviewFragment, dropListing.firstChild); 
				
		getBinaryDataReader.onload = function(evt){ 
				TCNDDU.processXHR(thumb, file, index, evt.target.result);
		};
		getBinaryDataReader.readAsBinaryString(file);
	};
	   
	TCNDDU.processXHR = function (div_thumb, file, index, bin) {
        var xhr = new XMLHttpRequest(),
			fileUpload = xhr.upload,
		    progressBar = document.createElement('div'),
			percentP = document.createElement('p'),
			progressBarWidth;
		
		percentP.textContent = "0%";
		progressBar.className = "progressBar";
		progressBar.appendChild(percentP);
		div_thumb.appendChild(progressBar);
		
		var loaderIndicator = percentP;
		
		fileUpload.log = div_thumb;
		
		progressBarWidth = progressBar.clientWidth;
		
		fileUpload.addEventListener("progress", function(event) {
			if (event.lengthComputable) {
				var percentage = Math.round((event.loaded * 100) / event.total);
				percentage = percentage - 1;
				if (percentage < 100) {
					loaderIndicator.style.width = (percentage*progressBarWidth/100) + "px";
					loaderIndicator.textContent = percentage + "%";
				}
			}
		}, false);
		
		
		fileUpload.addEventListener("error", TCNDDU.uploadError, false);
		
		xhr.onreadystatechange = function (evt) {
			if (xhr.readyState == 4) {
				if(xhr.status == 200) {
					var resp = window.JSON.parse(xhr.responseText);
					if (resp.result=='ok')
					{
						$.each($('.selectedphotos'), function() {
							if (this.id == resp.photoid)
							{
								$(this.parentNode.parentNode).hide();
							}
						});		
						
						var description = div_thumb.getElementsByTagName('div')[0];
						checkbox = document.createElement('input');
						checkbox.type =	"checkbox";
						checkbox.className = "selectedphotos";
						checkbox.id = resp.photoid;
						checkbox.value = resp.photoid;
						description.appendChild(checkbox);	
						div_thumb.className = "loaded";
					}
					else
					{
						div_thumb.className = "loading";
						progressBar.style.margin = "0px";
						loaderIndicator.textContent = "error:"+resp.result;
						loaderIndicator.style.color = "red";
					}
				} else {
					alert('{% _ "Upload Failed" %}');
				}
			}
		};

		xhr.open("POST", "/admin/uploadv2/");
		xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); 
		xhr.setRequestHeader('Content-Disposition', '{"albumid":"'+ {{album.id}}+'","filename":"'+file.name + '"}');
		if(xhr.sendAsBinary) xhr.sendAsBinary(bin);	
		else xhr.send(file);
	};
            
	TCNDDU.uploadError = function (error) {
		console.log("error: " + error.code);
	};   
	
	/* setup TCNDDU */
    if(window.addEventListener) window.addEventListener("load", TCNDDU.setup, false);
})();

var get_selected_photos  = function() {
	var selected_id_list = new Array();
    $.each($('.selectedphotos'), function() {
            if ($(this).attr('checked')){
                    selected_id_list.push(this.id);
                }
    });
    return selected_id_list;
};

$(document).ready(function() {
	$("#deleteselected").click(function() {
		$("#page").block({ message: $('#deletequestion'), css: { width: '375px' } });
    });
	$('#deleteyes').click(function() {
        var selected_id_list = get_selected_photos();
        if (selected_id_list.length == 0){
            $("#page").unblock();
            return;
        }

        $("#page").block({message: '<h1>{% _ "Deleting Selected Photos..." %}</h1>',
		                css: { border: '1px solid #60a0c0',width:"400px" }
		            });
        $.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=deletephoto",
                { 'idlist': selected_id_list.join(',')},
       	        function(json){
                  	 if (json.result=='ok') {
                  	 }
                  	 else
                  	 {
                 	 	alert(json.msg);
                  	 }
                     window.location.reload();
        });
    });
	$('#deleteno').click( function() {$("#page").unblock(); });


    $("#moveselected").click(function() {
		$("#page").block({message: '<h1>{% _ "Moving Selected Photos..." %}</h1>',
		                css: { border: '1px solid #60a0c0',width:"400px" }
		            });
        var selected_id_list = get_selected_photos();
        if (selected_id_list.length == 0){
            $("#page").unblock();
            return;
        }

        var ablumid = '{{album.id}}';
        var newalbumid = $("#selectalbum option:selected").attr('value');
        if (newalbumid == ablumid)
        {
            $("#page").unblock();
            return;
        }

        $.getJSON("{{gallery_settings.baseurl}}/admin/ajaxaction/?action=movephoto",
                { 'idlist': selected_id_list.join(','),
                  'albumid': ablumid,
                  'newalbumid': newalbumid},
       	        function(json){
                  	 if (json.result=='ok') {
                  	 }
                  	 else
                  	 {
                 	 	alert(json.msg);
                  	 }
                     window.location.reload();
        });
    });
});
</script>
{% endif %}  
{% endblock %}

{% block commandbar %}
        <li>|</li>
        <li><a href="/showslider/{{album.name}}/">{% _ "Slide Show" %}</a></a></li>
		{% if users.is_admin %}
        <li>|</li>
        <li><a href="#" id="deleteselected">{% _ "Delete Selected"%}</a></li>
        <li>|</li>
        <li><a href="#" id="moveselected">{% _ "Move Selected to:"%}</a></li>
        <li><select id="selectalbum" name="selectalbum">
                {% for ab in allalbums %}
                <option value="{{ab.id}}">{{ab.name}}
                {% if not ab.public %} ({% _ "private"%}) {% endif %}
                </option>
                {% endfor %}
            </select>
        </li>
        {% endif %}
{% endblock %}
   
{% block page %}
<div id="page">
        {% include 'pager.html' %}
        <!-- start content -->
        {% if users.is_admin %}
        <div id="tips">{% _ "Tips: DragAndDrop photos into Album to Upload(Firefox/Chrome)" %}</div>
        {% endif %} 
        <div id="content">
        {% if not photos %}
            {% _ "no photo found" %}
        {% else %}
	        {% for photo in photos %}
	         <div id="thumb">
	            <a href="/{{photo.album.name}}/{{photo.name}}"><img src="/thumb/{{photo.id}}.png"/></a>
	            <div id="description">
				 {{photo.description|truncate_chinese_words:30}}
				 {% if users.is_admin %}
                 <input class="selectedphotos" id="{{photo.id}}" value="{{photo.id}}" type="checkbox"/>
                 {% endif %}
				</div>
	         </div>
	         {% endfor %}
         {% endif %}
         </div>
		 
		{% if users.is_admin %}
         <div id="deletequestion" style="display:none; cursor: default; color: red;">
           <h1>{% _ 'R you seriously delete selected photos?' %}</h1>
           <input type="button" id="deleteno" value="{% _ 'No, I just try the button'%}" />
           <input type="button" id="deleteyes" value="{% _ 'Yes, just delete it'%}" />
        </div>
        {% endif %}
		
        <!-- end content -->
        {% include 'pager.html' %}
    <div style="clear: both;">&nbsp;</div>
</div>
{% endblock %}